<template>
  <div
    id="tab-bar"
    :class="slide"
    @scroll="handleScroll"
    class="box animated"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "TabBar",
  data() {
    return {
      slide: "slideInDown",
      top: 0,
      path: ""
    };
  },
  methods: {
    handleScroll() {
      var oldtop = this.top;
      this.top = document.documentElement.scrollTop || document.body.scrollTop;
      if (this.top >= oldtop) {
        this.slide = 	"slideOutUp ";
      } else {
        this.slide = "slideInDown";
      }
    }
  },
  mounted() {
    if (this.$route.meta.keepAlive) {
      window.addEventListener("scroll", this.handleScroll, true);
    } else {
    }
  },
  watch: {}
};
</script>

<style scoped>
#tab-bar {
  display: flex;
  background: var(--color-title-background);
  position: fixed;
  z-index: 3;
  right: 0;
  left: 0;
  /* 阴影过度 */
  box-shadow: 0px -1px 1px rgba(228, 177, 177, 0.1); /* y偏移 x偏移 偏移量 颜色 */
  z-index: 9;
}
</style>
